<template>
	<view class="container">
		<view class="titmagin"></view>
		<view class="titlelunbo">预览卡片已经生成，点击卡片可查看跳转效果</view>
		<view class="hader" @tap.stop="tolinkorimg">
			<view class="hader_one">
				<image class="img" :src="cardvalue.card_picture"></image>
				<view class="hader_main">
					<view class="mian_tit">{{ cardvalue.card_name }}</view>
					<view class="sub_tit">{{ cardvalue.card_describe }}</view>
					<!-- <view class="right_tit">30分钟内有效</view> -->
				</view>
			</view>
			<view class="lookcark">
				<image class="editicon" src="https://dysx-h5.shjiuliwl.com/Eblock/images/look.png"></image>
				<view class="edittext">点击预览卡片</view>
			</view>
			<view class="menban" @tap.stop="stop" v-if="!cardvalue.is_enabled">卡片已失效，客服审核后可使用</view>
		</view>
		<view class="title">
			<!-- <view class="block"></view> -->
			<view class="text">选择抖音卡片套餐<span class="span1">（手动发送卡片）</span></view>
		</view>
		<view class="vipoption" v-if="product&&product.risk_free_list">
			<view class="vipoptiontit">
				<image class="img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/reddun.png"></image>
				<!-- <marquee behavior="alternate" class="marquees" direction="up" scrollamount="3">
					<span style="line-height: 65rpx;margin-right: 100rpx; color: rgba(252, 69, 28, 1);" v-for="(item,index) in run">{{ item }}</span>
				</marquee> -->
				<view class="vipoptiontittxt">
					<!-- <p class="runtet" v-for="(item,index) in run">{{ item }}</p> -->
					<liu-notice-bar :dataList="run" color="rgba(252, 69, 28, 1)" :interval="3000"></liu-notice-bar>
				</view>
			</view>
			<!-- <view class="iteminput">
				<view class="input_text">抖音卡片数量</view>
				<image class="jianhaoimg" @tap="inputjian" src="https://dysx-h5.shjiuliwl.com/Eblock/images/jianhao.png"></image>
				<input class="mathematicsinput" v-model="card_count"/>
				<image class="jianhaoimg" @tap="inputjia" src="https://dysx-h5.shjiuliwl.com/Eblock/images/jiahao.png"></image>
			</view> -->
			<view class="slideSelection">
				<scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar="false">
					<view v-for="item,index in product.risk_free_list" :key="index" @tap="Selectid(item)">
						<view :class="item.id ==product_risk_item.id?'scroll_item active11':'scroll_item'">
							<view class="item_top">{{ item.exp_date_desc }}</view>
							<view class="item_center"><span class="span2">￥</span>{{ item.price/100}}</view>
							<view class="item_average">{{item.price_desc/100}}元/天</view>
							<view class="item_bottom" v-show="item.id ==product_risk_item.id"></view>
						</view>
					</view>
				</scroll-view>
			</view> 
		</view>
		<view class="title">
			<!-- <view class="block"></view> -->
			<view class="text">抖音企业号套餐<span class="span1">（自动发送卡片）</span></view>
		</view>
		<view class="enterprise_Package" v-if="product&&product.qiye_list">
			<view class="enterprise_Package_item" v-for="(item,index) in product.qiye_list" @tap="defulenter(item)">
				<image class="Package_icon" :src="item.icon"></image>
				<view class="Package_text">
					<view class="Package_text_one">{{item.name}}</view>
					<view class="Package_text_two">{{ item.desc }}</view>
				</view>
				<view class="Package_money"><span class="span1">￥ </span>{{ item.price/100 }}</view>
				<image class="Package_icon2" v-if="enterpriseAccount.includes(item.id)" src="https://dysx-h5.shjiuliwl.com/Eblock/images/lanxuanzhong.png"></image>
				<image class="Package_icon2" v-else src="https://dysx-h5.shjiuliwl.com/Eblock/images/weixuianzhong.png"></image>
			</view>
		</view>
		<view class="title">
			<view class="text">选择支付方式</view>
		</view>
		<view class="payuse">
			<view class="payuseItem" v-for="(item,index) in payusevalue" @tap="changepay(item)">
				<image class="payuseItem_icon" :src="item.icon"></image>
				<view class="payuseItem_text">{{ item.name }}</view>
				<image class="payuseItem_def" v-if="payuse_def.value==item.value" src="https://dysx-h5.shjiuliwl.com/Eblock/images/lanxuanzhong.png"></image>
				<image class="payuseItem_def" v-else src="https://dysx-h5.shjiuliwl.com/Eblock/images/weixuianzhong.png"></image>
			</view>
		</view>	
		<view class="afterSales">
			<image class="img" src="https://dysx-h5.shjiuliwl.com/Eblock/images/viplb2.png"></image>
		</view>
		<view class="topay">
			<view class="topay_center">
				<view class="topay_center_top">虚拟产品卡片生成后无法退款</view>
				<!-- <view class="topay_center_top" v-show="defuelvip==0">请选择所需会员套餐</view>
				<view class="topay_center_top" v-show="defuelvip!=0">已选{{defuelvip}}个套餐</view> -->
				<view class="topay_center_bottom">合计：<span class="span1">￥{{ allmoney.toFixed(2) }}</span></view>
			</view>
			<view class="topay_click" @tap="topay">开通会员</view>
		</view>
	</view> 
</template>

<script>
import { onGotApiData , getService,addClick } from '../../utils/api.js';
export default {
	data() {
		return {
			cardvalue: {}, // 获取到卡片的信息
			risk: "有风险提示", //有无风险选项
			product:[],  //产品
			product_risk:{}, // 选择有无风险
			product_risk_item:[], //选择的套餐
			card_count:0, //输入框卡片的数量
			enterpriseAccount:[], //企业套餐选中的id
			enterprisemoney:0,   //企业套餐的价格
			payusevalue:[], //支付方式
			payuse_def:{}, //选中的支付方式
			allmoney:0,//最终的价格
			channel_no:'',
			link:'',//首页地址
			code:'',//code值
			run:[], //跑马灯
			ispay:false, //支付防重复
			defuelvip:0, // 选中几个会员
		}	
	},
	onLoad(e){
		console.log('e',e.code)
		this.code = e.code
		this.channel_no = uni.getStorageSync('EK_channel_no')
		this.link = uni.getStorageSync('EK_indexhref')
		// 请求卡片
		this.getcard()

		// 请求参品
		this.getproduct()
		// 获取支付方式
		this.getpayuse()
		// 事件统计
		addClick('会员页','V3','访问数')
		// 跑马灯
		this.marquee()
	},
	onShow() {

	},
	onReady() {
    // 页面初次渲染完成时执行的代码

	},
	onHide() {
    // 页面隐藏时执行的代码
	},
	onUnload() {
    // 页面卸载时执行的代码
	},
	// 生命周期的第四个函数，在该函数将数据渲染到页面上，生成真实dom
	mounted(){

	},
	watch: {
		card_count: {
       	 immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        	handler(newValue, oldValue) {
        	  console.log('卡片数量改变了', newValue)
			  console.log("product_risk_item",this.product_risk_item)
				if(this.product_risk_item.price){
					this.allmoney = (this.product_risk_item.price / this.product_risk_item.card_count)/100 * newValue + this.enterprisemoney/100 
				}
      	  }
   	   },
		product_risk_item: {
       	 immediate: true, //初始化时让handler调用一下
      	  //handler什么时候调用？当isHot发生改变时。
      	  handler(newValue, oldValue) {
      	    console.log('套餐改变了', newValue)
			  console.log("product_risk_item",this.product_risk_item)
			  if(!newValue.price){
				this.allmoney = this.enterprisemoney/100
				this.defuelvip = this.enterpriseAccount.length
			  }else{
				this.allmoney = this.product_risk_item.price / 100 + this.enterprisemoney/100
				this.defuelvip = this.enterpriseAccount.length + 1
			}
     	  }
    	},
    },
	methods: {
		// 获取卡片基础信息
		getcard () {
			const params = {
				code: this.code
			}
			onGotApiData('/api/card/v1/get','GET',params,this.card_value)
		},
		// 获取基础信息结果
		card_value (result) {
			console.log('result1',result)
			this.cardvalue  = result.data
		},
		// 吊起获取客服联系客服接口
		getservicelink () {
			// 复制文本到剪切板
			uni.setClipboardData({
				data: this.$route.query.code,
				success: function() {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			})
			const href = uni.getStorageSync('indexhref')
			const params = {
				link: href,
				subject:'ppz'
			}
			getService('/api/kefu/douyin_kefu','POST',params,this.Service_value)
		},
		Service_value (result) {
			window.location.href = result.data
		},
		// 点击卡片跳转微信小程序
		tolinkorimg () {
			// 事件统计
			addClick('会员页','V3','卡片预览')
		
			window.location.href = this.cardvalue.card_url

			const params = {
				code: this.code,
				env_version:'release'
			}
			// onGotApiData('/api/wx_xcx/jump_xcx','GET',params,this.towx)
		},
		towx(result){
			console.log('跳转到微信',result)
			window.location.href = result.data.openlink
		},
		// 获取产品	
		getproduct() {
			const params = {
				channel_no: this.channel_no,
				is_risk:0,
			}
			onGotApiData('/api/product/v2/list','GET',params,this.getproduct_value)
		},
		// 获取产品的结果
		getproduct_value(result) {
			this.product = result.data
			console.log('产品结果',this.product)
			// 选择第一个无风险
			// this.product_risk = this.product[0]
			// console.log('有无风险',this.product_risk)
			// this.risk = this.product_risk.name
			// this.product_risk_item = this.product_risk.list[0] 
			// console.log('选项',this.product_risk_item)
			// this.card_count = this.product_risk_item.card_count

			this.product.risk_free_list.forEach((item)=>{
				if(item.default_select == 1){
					this.product_risk_item = item  
					this.card_count = item.card_count
				}
			})
			// this.product_risk_item = this.product_risk.list[0] 
		},
		// 点击有无风险选择
		// changevipitem(item){
		// 	this.product_risk = item
		// 	this.product_risk_item = this.product_risk.list[0] 
		// 	this.risk = item.name
		// 	console.log("aa",this.product_risk_item)
		// 	this.card_count = this.product_risk_item.card_count
		// },
		// 切换会员
		Selectid(item){
			// 事件统计
			addClick('会员页','V3','卡片套餐切换')
			if(item.id == this.product_risk_item.id){
				this.product_risk_item = {}
				this.card_count = 0
			}else{
				this.product_risk_item = item
				this.card_count = this.product_risk_item.card_count
			}

		},	
		// 点击勾选企业套餐
		defulenter(items){
			if(items.icon =="https://dysx-h5.shjiuliwl.com/Eblock/images/qy1.png"){
				// 事件统计
				addClick('会员页','V3','点击自动回复套餐')
			}else{
				// 事件统计
				addClick('会员页','V3','点击小风车套餐')
			}
			if(this.enterpriseAccount.includes(items.id)){
				this.enterpriseAccount.forEach((item,index)=>{
					if(items.id == item){
						this.enterpriseAccount.splice(index,1)
						this.enterprisemoney = this.enterprisemoney - items.price
						console.log(items.price,'价格',this.enterprisemoney)
						this.allmoney = this.allmoney - items.price/100
						console.log('总价',this.allmoney)
					}
				})
			}else{
				this.enterpriseAccount.push(items.id)
				this.enterprisemoney = this.enterprisemoney + items.price
				console.log(items.price,'价格',this.enterprisemoney)
				this.allmoney = this.allmoney + items.price/100
				// console.log('总价',this.allmoney)
			}
			console.log("我是企业套餐选中数组",this.enterpriseAccount)
			if(this.product_risk_item.price){
				this.defuelvip = this.enterpriseAccount.length + 1
			}else{
				this.defuelvip = this.enterpriseAccount.length
			}
		},
		// 输入框的加减
		inputjian(){
			// 事件统计
			addClick('会员页','V3','卡片数量增')

			if(this.product_risk_item.card_count&&this.card_count > this.product_risk_item.card_count){
				this.card_count --
			}else if(this.product_risk_item.card_count&&this.card_count <= this.product_risk_item.card_count){
				uni.showToast({
					title: '卡片数量最少'+ this.product_risk_item.card_count +'张',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}else if(this.card_count <= 0){
				uni.showToast({
					title: '卡片数量最少0张',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				})
			}else{
				this.card_count --
			}
		},
		inputjia(){
			// 事件统计
			addClick('会员页','V3','卡片数量减')
			this.card_count ++
		},

		// 请求支付方式的方式
		getpayuse(){
			const params = {
				channel_no: this.channel_no,
			}
			onGotApiData('/api/order/query_pay_type','GET',params,this.getpayuse_value)
		},
		getpayuse_value(result){
			console.log('获取支付方式',result.data)
			result.data.forEach((item,index) => {
				if(item=="ZFB_H5"){
					const obj = {
						name:'支付宝',
						value:item,
						icon:'https://dysx-h5.shjiuliwl.com/Eblock/images/zfb.png',
					}
					this.payusevalue.push(obj)
				}else if(item=="WX_H5"){
					const obj = {
						value:item,
						name:'微信',
						icon:'https://dysx-h5.shjiuliwl.com/Eblock/images/wx.png',
					}
				this.payusevalue.push(obj)
				}
			});
			this.payuse_def = this.payusevalue[0]
		},
		// 切换支付方式
		changepay(item){
			// 事件统计
			if(item.value=='ZFB_H5'){
				addClick('会员页','V3','选择支付宝')
			}else{
				addClick('会员页','V3','选择微信支付')
			}
			this.payuse_def = item
		},
		// 点击提交订单
		topay(){
			// 事件统计
			addClick('会员页','V3','点击开通会员')
			// 防止重复点击
			if(this.ispay){
				console.log('ispay',this.ispay)
				return
			}
			this.ispay = true
			console.log('ispay',this.ispay)
			// return 	uni.navigateTo({
			// 			url: '/pages/orderResults/orderResults'
			// 		});

			// 处理一下穿过去的首页链接
			const url = uni.getStorageSync('EK_indexhref')
			const htmlIndex = url.indexOf('.html');
			// 如果找到了 .html，则截取之前的部分，否则保持原样
			const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
			const processedUrl = newUrl + '#/pages/orderResults/orderResults'
			// console.log('地址',url)
			// console.log('地址1',htmlIndex)
			// console.log('地址2',newUrl)
			// console.log('地址3',htmlIndex !== -1)
			// console.log('地址4',url.slice(0, htmlIndex + 5))
			// console.log("5",processedUrl)
			let ids = ''
			if(this.product_risk_item.id){
				ids = this.product_risk_item.id + ''
			}else if(!this.product_risk_item.id&&this.enterpriseAccount.length ==0){
				this.ispay = false
				return uni.showToast({
					title: '请至少选中一个套餐',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000 
				})
			}
			this.enterpriseAccount.forEach((item,index)=>{
				if(ids == ''){
					ids =  '' + item
				}else{
					ids =  ids + ',' + item
				}

			})
			const params = {
				channel_no: this.channel_no,
				card_code:this.code,
				product_id: ids,
				pay_type: this.payuse_def.value,
				return_url: processedUrl,
				link: this.link,
				phone:this.cardvalue.card_phone,
				card_count:this.card_count,
			}
			onGotApiData('/api/order/v3/create','POST',params,this.topay_value)
		},
		// 创建订单成功接口
		topay_value(result){
			console.log(result)
			this.ispay = false
			window.location.href = result.data.payUrl
		},
		stop () {
			console.log('我已经失效了宝宝')
		},
		marquee(){
			let params = {
				channel_no: this.channel_no,
			}
			onGotApiData('/api/run/list','GET',params,this.marquee_value)
		},
		marquee_value(result){
			console.log('跑马灯',result.data)
			result.data.forEach((item,index)=>{
				const obj = {
					id:index,
					titile:item
				}
				this.run.push(obj)
			})
		},
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		// max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		// width: 750rpx auto;
		background: linear-gradient(180deg, rgba(115, 149, 250, 1) 0%, rgba(68, 114, 252, 1) 75.7%, rgba(115, 149, 250, 0) 100%) no-repeat;
		background-size: 100% 14%;
		.titmagin{
			width: 750rpx;
			height: 30rpx;
		}
		.titlelunbo{
			width: 720rpx;
			height: 50rpx;
			margin: 0 auto; 
			border-radius: 8rpx;
			background: rgba(154, 179, 252, 1);
			font-size: 28rpx;
			line-height: 50rpx;
			color: rgba(5, 67, 252, 1);
			text-align: center;
		}
		.title{
			width: 750rpx;
			height: 60rpx;
			padding-top: 20rpx;
			// background-color: pink;
			// border: 1px solid black;
			margin: 0 auto;
			display: flex;
			.block{
				width: 8rpx;
				height: 32rpx;
				background-color: rgba(15, 74, 252, 1);
				margin: 14rpx 0 0 16rpx;
				border-radius: 4rpx;
			}
			.text{
				width: 720rpx;
				height: 60rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 0 0 20rpx;
				.span1{
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}
			}
		}  
		.hader{
			width: 720rpx;
			height: 270rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			// display: flex;
			position: relative;
			.hader_one{
				display: flex;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
				.img{
					width: 200rpx;
					height: 200rpx;
					margin: 5rpx;
					border-radius: 10rpx;
				}
				.hader_main{	
					width: 490rpx;
					height: 200rpx;
					// border: 1px solid black;
					margin: 0 0 0 20rpx;
					position: relative;
					.mian_tit{
						width: 490rpx;
						height: 90rpx;
						font-size: 36rpx;
						font-weight: 400;
						line-height: 50rpx;
						margin-top: 30rpx;
						// border: 1px solid black;
						color: rgba(56, 56, 56, 1);
						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 超出部分隐藏 */
						text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
					}
					.sub_tit{
						width: 490rpx;
						height: 60rpx;
						font-size: 30rpx;
						font-weight: 400;
						line-height: 30rpx;
						color: rgba(150, 149, 149, 1);
					}
					.right_tit{
						width: 160rpx;
						height: 36rpx;
						border-radius: 0px 6px 0px 2px;
						background: linear-gradient(90deg, rgba(255, 124, 71, 1) 0%, rgba(255, 74, 3, 1) 100%);
						box-shadow: 0px 2px 4px  rgba(212, 48, 48, 0.25);
						position: absolute;
						top: 0;
						right: -2rpx;
						font-size: 22rpx;
						line-height: 36rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}
			}
			.lookcark{
				width: 220rpx;
				height: 40rpx;
				padding-top: 10rpx;
				// border: 1px solid black;
				margin: 0 auto;
				display: flex;
				.editicon{
					width: 34rpx;
					height: 34rpx;
					// border: 1px solid black;
				}
				.edittext{
					width: 200rpx;
					height: 34rpx;
					font-size: 28rpx;
					margin-left: 4rpx;
					// border: 1px solid black;
					line-height: 34rpx;
					color: rgba(54, 104, 255, 1);
				}
			}
			.menban{
				width: 720rpx;
				height: 270rpx;
				border-radius: 10rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.8);
				font-size: 44rpx;
				font-weight: 700;
				line-height: 270rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
		// 会员部分
		.vipchoice{
			width: 720rpx;
			height: 200rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			.vipchoiceitem{
				width: 350rpx;
				height: 160rpx;
				background-color: #fff;
				border-radius: 10rpx;
				border-right: 1px solid rgba(51, 102, 255, 1);
				border-left: 1px solid rgba(51, 102, 255, 1);
				border-top: 1px solid rgba(51, 102, 255, 1);
				.vipchoicetop{
					width: 320rpx;
					height: 70rpx;
					margin: 0 auto;
					margin-top: 8rpx;
					// border: 1px solid black;
					z-index: 9;
					display: flex;
					.vipchoicetop_img{
						width: 48rpx;
						height: 48rpx;
						margin: 12rpx 0 0 2rpx;
					}
					.vipchoicetop_txt{
						width: 240rpx;
						height: 48rpx;
						// border: 1px solid black;
						margin: 10rpx 0 0 6rpx;
						font-size: 36rpx;
						line-height: 48rpx;
						color: rgba(56, 56, 56, 1);
					}
				}
				.vipchoicebuttom{
					width: 300rpx;
					height: 50rpx;
					// border: 1px solid black;
					margin: 0 auto;
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(166, 166, 166, 1);
				}
				.jiaobioao{
				width: 53rpx;
				height: 38rpx;
					// margin: 0 auto;
				margin: 4rpx 0 0 100rpx;
				}
			}
			.defult{
				background: linear-gradient(131.11deg, rgba(133, 163, 255, 1) 0%, rgba(82, 125, 255, 1) 100%);
				border-right: 1px solid rgba(15, 74, 252, 1);
				border-left: 1px solid rgba(15, 74, 252, 1);
				border-top: 1px solid rgba(15, 74, 252, 1);
				box-shadow: 6px -6px 7px  rgba(255, 255, 255, 0.25);
				.vipchoicetop{
					.vipchoicetop_txt{
						color: rgba(255, 255, 255, 1);
					}
				}
				.vipchoicebuttom{
					color: rgba(235, 240, 255, 1);
				}
			}

		}
		.vipoption{
			width: 730rpx;
			border-radius: 10rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			background-color: rgba(255, 255, 255, 1);
			margin: 0 auto;
			margin-top: 14rpx;
			z-index: 99;
			.vipoptiontit{
				width: 710rpx;
				height: 65rpx;
				margin:  0 auto;
				background-color: rgba(255, 207, 196, 1);
				border-radius: 40rpx;
				display: flex;
				.img{
					width: 42rpx;
					height: 42rpx;
					margin: 10rpx 10rpx 0 30rpx;
				}
				.vipoptiontittxt{
					width: 600rpx;
					height: 65rpx;
					font-size: 28rpx;
					line-height: 65rpx;
					color: rgba(252, 69, 28, 1);
					overflow: hidden;
				}
			}
			.iteminput{
				width: 710rpx;
				height: 110rpx;
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				// border: 1px solid black;
				background: rgba(237, 242, 255, 1);
				display: flex;
				.input_text{
					width: 210rpx;
					height: 110rpx;
					// border: 1px solid black;
					font-size: 28rpx;
					text-align: center;
					margin: 0 110rpx 0 20rpx;
					line-height: 110rpx;
					color: rgba(0, 0, 0, 1);
				}
				.jianhaoimg{
					width: 48rpx;
					height: 48rpx;
					margin: 31rpx 0rpx;
					// border: 1px solid black;
				}
				.mathematicsinput{
					width: 190rpx;
					height: 60rpx;
					border-radius: 10rpx;
					margin: 25rpx 20rpx;
					border: 1px solid black;
					text-align: center;
					line-height: 60rpx;
					font-size: 38rpx;
				}
			}	
			.slideSelection{
				width: 710rpx;
				height: 210rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				::v-deep .uni-scroll-view-content{
					display: flex;
					.scroll_item{
						width: 210rpx;
						height: 210rpx;
						margin-right: 12rpx;
						border-radius: 10rpx;
						background-color: rgba(237, 242, 255, 1);
						border: 1px solid rgba(140, 169, 255, 0.8);
						position: relative;
						.item_top{
							width: 210rpx;
							height: 40rpx;
							text-align: center;
							margin-top: 20rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: rgba(56, 56, 56, 1);
						}
						.item_center{
							width: 210rpx;
							height: 50rpx;
							margin-top: 4rpx;
							text-align: center;
							line-height: 50rpx;
							font-size: 56rpx; 
							line-height: 43.44px;
							font-weight: 700;
							color: rgba(0, 0, 0, 1);
							.span2{
								font-size: 32rpx;
							}
						}
						.item_average{
							width: 210rpx;
							height: 50rpx;
							border-radius: 4px;
							background: rgba(220, 228, 252, 1);
							margin: 0 auto;
							margin-top: 44rpx;
							font-size: 24rpx;
							line-height: 50rpx;
							color: rgba(56, 56, 56, 1);
							text-align: center;
						}	
						.item_bottom{
							width: 78rpx;
							height: 78rpx;
							z-index: 99;
							position: absolute;
							top: -24rpx;
							left: 156rpx;
							background: url('https://dysx-h5.shjiuliwl.com/Eblock/images/jiaobiao2.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					.active11{
						border: 1px solid rgba(181, 200, 255, 0.8);
						background: linear-gradient(180deg, rgba(181, 200, 255, 0.8) 0%, rgba(121, 154, 252, 0.8) 100%);
						box-shadow: 1px 2px 2px  rgba(0, 0, 0, 0.25);
						.item_average{
							background:rgba(107, 144, 255, 1);
							color: rgba(255, 255, 255, 1);
						}
					}
				}

			}
			.vipdetails{
				width: 710rpx;
				height: 270rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				display: flex;
				.vipdetailsitem{
					width: 230rpx;
					height: 270rpx;
					.vipdetailsitemone{
						width: 200rpx;
						height: 90rpx;
						padding-left: 30rpx;
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}
				}
				.packageSelection{
					width: 230rpx;
					height: 270rpx;
					.packageSelection_item{
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(128, 128, 128, 1);
						text-align: center;
					}
					.packageSelection_money{
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(10, 71, 255, 1);
						text-align: center;
					}
				}
				.packageSelection_defual{
					width: 230rpx;
					height: 290rpx;
					border-radius: 6px;
					margin-top: -10rpx;
					padding-top: 10rpx;
					background: linear-gradient(180deg, rgba(163, 186, 255, 0.8) 0%, rgba(82, 125, 255, 0.8) 100%);
					box-shadow: 1px 2px 2px  rgba(0, 0, 0, 0.25);
					position: relative;
					.packageSelection_item{
						width: 230rpx;
						height: 90rpx;
						font-size: 28rpx;
						line-height: 90rpx;
						color: rgba(66, 109, 237, 1);
						text-align: center;
					}
					.packageSelection_money{
						width: 230rpx;
						height: 90rpx;
						font-size: 32rpx;
						line-height: 90rpx;
						font-weight: 700;
						color: rgba(10, 71, 255, 1);
						text-align: center;
					}
					.jiaobiao{
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						top: -28rpx;
						left: 156rpx;
					}
				}
			}
			.iteminput_bottom_text{
				width: 700rpx;
				height: 40rpx;
				margin-top: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: rgba(255, 87, 51, 1);
				text-align: center;
			}
		}
		.videomain{
			width: 730rpx;
			height: 400rpx;
			margin: 0 auto;
			margin-top:20rpx;
			border: 1px solid black;
			.videoitem{
				width:100%;
				height:400rpx;
			}
		}
		.enterprise_Package{
			width: 730rpx;
			// height: 300rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 10rpx 0 0 0;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			.enterprise_Package_item{
				width: 730rpx;
				height: 100rpx;
				padding: 10rpx 0 ;
				border-bottom: 1px solid rgba(243, 243, 243, 1);
				display: flex;
				.Package_icon{
					width: 56rpx;
					height: 56rpx;
					margin: 22rpx;
				}
				.Package_text{
					width: 390rpx;
					height: 100rpx;
					margin:  0 0 0 10rpx;
					// border: 1px solid black;
					.Package_text_one{
						width: 390rpx;
						height: 50rpx;
						font-size: 28rpx;
						line-height: 56rpx;
						color: rgba(0, 0, 0, 1);
					}
					.Package_text_two{
						width: 390rpx;
						height: 40rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);
					}
				}
				.Package_money{
					width: 130rpx;
					height: 100rpx;
					// border: 1px solid black;
					font-size: 40rpx;
					font-weight: 700;
					line-height: 90rpx;
					text-align: center;
					color: rgba(56, 56, 56, 1);
					.span1{
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(56, 56, 56, 1);
					}
				}
				.Package_icon2{
					width: 48rpx;
					height: 48rpx;
					margin: 24rpx 0 0 10rpx;
					// border: 1px solid black;
				}
			}
		}
		.payuse{
			width: 750rpx;
			height: 190rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			// margin-bottom: 180rpx;
			.payuseItem{
				width: 750rpx;
				height: 90rpx;
				// border: 1px solid black;
				display: flex;
				.payuseItem_icon{
					width: 48rpx;
					height: 48rpx;
					margin: 21rpx 0 0 30rpx;
				}
				.payuseItem_text{
					width: 500rpx;
					height: 90rpx;
					margin: 0 0 0 30rpx;
					// border: 1px solid black;
					line-height: 86rpx;
				}
				.payuseItem_def{
					width: 42rpx;
					height: 42rpx;
					margin: 24rpx 0 0 50rpx;
				}
			}
		}
		.afterSales{
			width: 740rpx;
			height: 580rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			margin-bottom: 170rpx;
			.img{
				width: 740rpx;
				height: 580rpx;
			}
		}
		.topay{
			width: 750rpx;
			height: 130rpx;
			margin-top: 60rpx;
			background: rgba(255, 255, 255, 1);
			position: fixed;
			bottom: 0;
			z-index: 999;
			display: flex;
			.topay_center{
				width: 450rpx;
				height: 110rpx;
				padding-top: 10rpx;
				.topay_center_top{
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(56, 56, 56, 1);
					text-indent: 1em;
				}
				.topay_center_bottom{
					font-size: 28rpx;
					font-weight: 700;
					line-height: 50rpx;
					color: rgba(0, 0, 0, 1);
					text-indent: 1em;
					.span1{
						font-size: 36rpx;
						font-weight: 700;
						color: rgba(255, 87, 51, 1);
					}
				}
			}
			.topay_click{
				width: 300rpx;
				height: 130rpx;
				background: linear-gradient(270deg, rgba(51, 102, 255, 1) 0%, rgba(115, 149, 250, 1) 100%);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				font-size: 40rpx;
				line-height: 130rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;

			}	
		}
	}
</style>
